<template>
  <view>
    <!-- 搜索栏 -->
    <YgSearch />
    <!-- 轮播图 -->
    <u-swiper :list="list" radius="0" height="340rpx" @change="swiperChange">
      <template #indicator>
        <!-- 指示器列表 -->
        <view class="indicator">
          <view
            class="indicator-item"
            :class="{ current: index === currentSwiper }"
            v-for="(item, index) in list"
            :key="index"
          >
          </view>
        </view>
      </template>
    </u-swiper>
    <!-- 分类导航遍历渲染 -->
    <view class="cate-wrap">
      <image
        class="cate-img"
        v-for="item in cate"
        :key="item.name"
        :src="item.image_src"
      />
    </view>
    <!-- 楼层数据 -->
    <view class="floor" v-for="item in floor" :key="item.floor_title.name">
      <!-- 楼层标题 -->
      <image class="floor-title" :src="item.floor_title.image_src" mode="" />
      <!-- 产品列表 -->
      <view class="product-list">
        <image class="left-img" :src="item.product_list[0].image_src" mode="" />
        <view class="right">
          <image class="right-img" :src="item.product_list[1].image_src" />
          <image class="right-img" :src="item.product_list[2].image_src" />
          <image class="right-img" :src="item.product_list[3].image_src" />
          <image class="right-img" :src="item.product_list[4].image_src" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  // 在页面进入的生命周期中, 获取轮播图数据
  // 注意无论是 vue 生命周期还是小程序生命周期都可以生效
  // 但是根据之前的建议, 应用级别/页面级别的生命周期都用小程序的, 组件才用vue标准
  export default {
    data() {
      return {
        // 当前激活轮播图
        currentSwiper: 0,
        // 轮播图
        list: [],
        // 分类导航
        cate: [],
        // 楼层数据
        floor: [],
      };
    },
    onLoad() {
      this.getSwiper();
      this.getCate();
      this.getFloor();
    },
    methods: {
      swiperChange(data) {
        // console.log(data);
        this.currentSwiper = data.current;
      },
      async getSwiper() {
        console.log("页面加载");
        // const res = await uni.request({
        // 我们知道这个 res 是两个元素组成的数组, 完全可以做解构
        const [err, res] = await uni.request({
          url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
        });
        console.log("错误", err);
        console.log("数据", res.data.message);
        this.list = res.data.message.map((item) => item.image_src);

        // 试用 uview http 函数
        const resUview = await uni.$u.http.get("/home/swiperdata");
        console.log("uview 封装baseURL 之后", resUview);
      },
      async getCate() {
        const [err, res] = await uni.request({
          url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
        });
        // 当前项目后端所有数据都封装在 message 属性中
        console.log(res.data.message);
        this.cate = res.data.message;
      },
      async getFloor() {
        const [err, res] = await uni.request({
          url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
        });
        console.log(res);
        this.floor = res.data.message;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .indicator {
    display: flex;
    .indicator-item {
      margin: 0 5rpx;
      background-color: #fff;
      width: 20rpx;
      height: 10rpx;
      border-radius: 5rpx;
    }
    .current {
      background-color: #fff;
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
    }
  }
  .cate-wrap {
    margin: 12rpx 0;
    display: flex;
    justify-content: space-around;
    .cate-img {
      width: 128rpx;
      height: 140rpx;
    }
  }

  .floor-title {
    width: 750rpx;
    height: 59rpx;
    margin: 24rpx 0 12rpx;
  }

  .product-list {
    padding: 0 12rpx;
    display: flex;
    .left-img {
      width: 232rpx;
      height: 386rpx;
    }
    .right {
      flex: 1;
      .right-img {
        width: 233rpx;
        height: 188rpx;
        margin-left: 15rpx;
      }
    }
  }
</style>